<template>
  <ul class="contact-container" v-if="data">
      <li>
          <a href="">
              <Icon type='icon-github'/>
              <span>{{data.github}}</span>
          </a>
      </li>
      <li>
          <a href="">
              <Icon type='icon-email'/>
              <span>{{data.mail}}</span>
          </a>
      </li>
      <li>
          <a href="">
              <Icon type='icon-qq'/>
              <span>{{data.qq}}</span>
          </a>
          <div class="pop">
          <img src="@/assets/logo.png" alt=""/>
          </div>
      </li>
      <li>
          <a href="">
              <Icon type='icon-weixin-copy'/>
              <span>{{data.weixin}}</span>
          </a>
          <div class="pop">
          <img src="@/assets/logo.png" alt=""/>
           </div>
      </li>
  </ul>
</template>

<script>
import Icon from '@/components/Icon'
export default {
    components:{
        Icon,
    },
    computed: {
        data() {
          return  this.$store.state.leftAside.data;
        },
    
    },
}
</script>
<style lang="less" scoped>
*{
    margin: 0;
    padding: 0;
}
.contact-container{
    list-style: none;
    margin: 0;
    padding: 0;
    padding: 20px;
    padding-bottom: 10px;
    color: gray;
    li{
        height: 30px;
        line-height: 30px;
        margin: 14px 0;
        position: relative;
        &:hover .pop{
            transform: scaleY(1);
        }
        a{
            display: flex;
            align-items: center;
            text-decoration: none;
            color: inherit;
            cursor: pointer;
        .icon-container{
            width: 36px;
            font-size: 26px; 
        }
        }
        .pop{
            position: absolute;
            top: -130px;
            left: 5px;
            width: 120px;
            height: 120px;
            padding: 5px;
            background: #fff;
            border-radius: 5px;
            transform: scaleY(0);
            transform-origin: bottom;
            transition: 0.3s;
            img{
                width: inherit;
                height: inherit;
                object-fit: cover;
            }
            &::after{
                content: '';
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                border: 8px solid transparent;
                border-top-color: #FFF;
                bottom: -15px;
            }
        }

    //    .pop{
    //         width: 100px;
    //         height: 100px;
    //         position: absolute;
    //         left: 36px;
    //         top: -100px;
    //         background: #fff;
    //         border-radius: 5px;
    //         padding: 1px;
    //         &::after{
    //         content: '';
    //         border: 8px solid transparent;
    //         border-top-color: #fff;
    //         position: absolute;
    //         left: 50%;
    //         transform: translate(-50%,0);
    //         bottom: -14px;
    //         }
    //         transform: scaleY(0);
    //         transform-origin: bottom;
    //         transition: 0.3s;
    //         img{
    //             width: 100%;
    //             height: 100%;
    //         }
    //    }
        
        
        &:hover .pop{
            transform: scaleY(1);
        }
    }
}

</style>

